<template>
  <view class="created">
    <nav-bar title="需水信息" leftArrow></nav-bar>
    <view class="created-header">需水上报</view>
    <van-form class="created-form" @submit="onSubmit" :reafonly="loading" label-width="100px">
      <van-cell-group inset>
        <van-field
          v-model="form.projectItemName"
          is-link readonly colon required
          name="picker"
          label="需水区域(灌片)"
          placeholder="请选择需水区域"
          @click="selectShow.project = true"
          :rules="[{ required: true, message: '请选择需水区域' }]"
        />
        <van-field
          v-model="form.demandArea"
          rows="2" autosize colon type="textarea" required
          label="具体需水区域"
          placeholder="请输入具体需水区域"
          :rules="[{ required: true, message: '请输入具体需水区域' }]"
        />
        <van-field
          v-model="form.areaDemand" colon required
          label="需水面积"
          :rules="[{ required: true, message: '请输入需水面积' }]">
          <template #extra>亩</template>
        </van-field>
        <van-field
          v-model="form.waterDemand" colon required
          label="预计需水量"
          :rules="[{ required: true, message: '请输入预计需水量' }]">
          <template #extra>m³</template>
        </van-field>
        <van-field
          name="uploader" colon label="附件照片"
        >
          <template #input>
            <upload-file accept="image/*" v-model="form.picId" ></upload-file>
          </template>
        </van-field>
      </van-cell-group>
      <view class="created-footer">
        <van-button class="created-button-cancel" type="default" native-type="submit">取消</van-button>
        <van-button 
          class="created-button-submit" type="primary" native-type="submit"
          :loading="loading" loading-text="上报中..."
        >上报</van-button>
      </view>
    </van-form>

    <!-- 选择器 灌片 -->
    <van-popup v-model:show="selectShow.project" destroy-on-close position="bottom">
      <van-picker
        :columns="projectAreaList"
        @confirm="onProjectConfirm"
        @cancel="selectShow.project = false"></van-picker>
    </van-popup>

  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import { reactive, ref } from 'vue';
import { apiWaterNeedSave } from '@/api/waterNeed';
import { apiProjectAreaList } from '@/api/common';
import { projects, sources, devices } from '@/local/common';

let form = reactive({
  'projectItemId': null,
  'projectItemName': null,
  'adCode': null,
  'areaDemand': null, //灌水面积 
  'waterDemand': null, // 预计需水量
  'demandArea': '', // 具体需水区域
  'picId': []
});
const selectShow = reactive({
  project: false
});
const loading = ref(false);
let projectAreaList = reactive([]);

const onSubmit = (values) => {
  loading.value = true;
  apiWaterNeedSave(form).then(res => {
    loading.value = false;
    uni.navigateTo({ url: '/pages/waterNeed/index' });
  })
};

// 选择器 灌片
const onProjectConfirm = ({selectedValues, selectedOptions,}) => {
  console.log(selectedValues, selectedOptions);
  form.projectItemId = selectedValues[0];
  form.projectItemName = selectedOptions[0]?.text;
  form.adCode = selectedOptions[0]?.town;
  selectShow.project = false;
}

// 获取数据 灌片信息
const getProjectAreaList = () => {
  apiProjectAreaList({
    pageNum: 1,
    pageSize: 1000
  }).then(res => {
    projectAreaList = res.data.map(n => ({
      text: n.name,
      value: n.projectItemId,
      town: n.town
    }));
  })
}
getProjectAreaList();
</script>

<style lang="scss" scoped>
.created {
  &-header {
    height: 100rpx;
    line-height: 100rpx;
    text-indent: 30rpx;
    color: #333;
  }
  &-form {
    padding-bottom: 20rpx;
  }
  &-footer {
    margin-top: 30rpx;
    padding: 0 30rpx;
    display: flex;
    gap: 30rpx;
  }
  &-button {
    &-submit {
      flex: 1;
    }
    &-cancel {
      width: 140rpx;
    }
  }
}
</style>